import React, { useState, useEffect }  from 'react';
import { Select, Input, Button, Tag, Space, Table, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../../api/salary.js'
import * as salary from '../../../../../api/requestsalary.js'
import '../Group/Group.scss'
const { Search } = Input;

function Group(props: any) {
    var [salarygroup, setSalarygroup] = useState([])
    var navigate=useNavigate()
    useEffect(() => { //请求薪资组列表
        // service.salary_group({}).then((res: any) => {
        //     console.log(res);
        //     setSalarygroup(res.data)
        // })
        salary.findallgop().then((res: any) => {
            // console.log(res.data.data);
            setSalarygroup(res.data.data)
        })
    }, [])
    var onSearch = (value:any) => { //薪资组中搜索
        service.group_search({ salary_group_name:value }).then((res) => {
            console.log(res);
            setSalarygroup(res.data.data)
        })
    }
    var tiao = () => { //跳转新增薪资组
        navigate('/index/moneys/salary/addgroup')
    }
    var delMetting = async (jid: any) => { //删除单个薪资组
        // console.log(jid);
        var res = await salary.delgopbyjid({ jid })
        // console.log(res);
        salary.findallgop().then((res: any) => {
            // console.log(res.data.data);
            setSalarygroup(res.data.data)
        })
    }
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
        jid:string;
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '薪资组名称',
            dataIndex: 'salary_group_name',
            key: 'salary_group_name',
        },
        {
            title: '月计薪时长',
            dataIndex: 'monthly_working_hours',
            key: 'monthly_working_hours',
        },
        {
            title: '计薪公式',
            dataIndex: 'salary_formula',
            key: 'salary_formula',
        },
        {
            title: '适用范围',
            dataIndex: 'ranges',
            key: 'ranges',
        },
        {
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, record) => <a onClick={()=>{delMetting(record.jid)}}>移除核算</a>
        },
    ];
    const data = salarygroup
    return (
        <div className='group'>
            <div className='group-one'>
                <div className='group-title-left'></div>
                <h4 className='group-title'>薪资组</h4>
            </div>
            <div className='group-two'>
                <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 320 }} />
                <Button type="primary" style={{ height: 40 }} onClick={()=>{tiao()}}><PlusOutlined />新增薪资组</Button>
            </div>
            <Table columns={columns} dataSource={data} className='group-three' />
        </div>
    );
}

export default Group;